import { Button } from 'antd';
import React, { useEffect } from 'react'
import { connect, useSelector } from 'react-redux';

const TestPage3 = props => {
  const count = useSelector(({count}) => count) // 子组件可以通过useSelector 访问state
  
  const { diagule, changePage, changeDl, updateCount } = props
  useEffect(() => {}, [])
  return (
    <>
    <div>&nbsp;&nbsp;&nbsp;&nbsp;|--TestPage3---, {diagule.currentHl} ---- {count}</div>
    <Button onClick={updateCount}>add</Button>
    </>
  )
}

const mapStateToProps = (state) => {
  return {
    diagule: state.diagule,
    count: state.count
  }
}


const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    changePage: () => dispatch({type: 'CHANAGE_PAGE', payload:'history'}),
    changeDl: () => dispatch({type: 'UPDATE_DL', payload:10}),
    updateCount: () => dispatch({type: 'ADD', payload:100})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TestPage3)
